<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <div class="normal-list-page-bd">
            <Table border
                   :loading="list.loading"
                   :columns="list.columns"
                   :data="list.tableData"
                   @on-selection-change="selectionChange"></Table>
          </div>
          <div class="normal-list-page-ft clearfix">
            <Page class="fr"
                  :total="queryData.totalRecord"
                  :page-size="queryData.pageSize"
                  :current="queryData.page"
                  @on-change="changePage"
                  @on-page-size-change="onPageSizeChange"
                  show-elevator
                  show-total
                  show-sizer></Page>
          </div>
        </div>
        <!--新建&修改-->
        <Modal v-model="modal.mallCategory.isShow"
               :loading="modal.mallCategory.loading"
               :mask-closable="false"
               :title="modal.mallCategory.title"
               @on-ok="postData">
          <Form ref="systemFrom"
                :model="modal.mallCategory.formData"
                :rules="modal.mallCategory.rules"
                :label-width="120">
            <FormItem label="父类id"
                      prop="metaKey">
              <Input disabled
                     v-model="modal.mallCategory.formData.parentId"
                     style="width:300px;" />
            </FormItem>
            <FormItem label="品类名称"
                      prop="name">
              <Input placeholder="请输入品类名称"
                     v-model="modal.mallCategory.formData.name"
                     style="width:300px;" />
            </FormItem>
            <FormItem label="关键词"
                      prop="metaKey">
              <Input placeholder="请输入关键词"
                     v-model="modal.mallCategory.formData.metaKey"
                     style="width:300px;" />
            </FormItem>
            <FormItem label="描述"
                      prop="metaDescription">
              <Input placeholder="请输入描述"
              type="textarea"
                     v-model="modal.mallCategory.formData.metaDescription"
                     style="width:300px;" />
            </FormItem>
            <FormItem label="上传/修改图片"
                      prop="icon">
              <upload-image ref="upload"
                            :uploadList.sync="modal.mallCategory.formData.uploadList"
                            @imageupload="calcImg"
                            imgSize="1"></upload-image>
            </FormItem>
            <FormItem label="状态"
                      prop="state">
              <i-switch size="large"
                        @on-change="change"
                        v-model="modal.mallCategory.formData.state"
                        :value="modal.mallCategory.formData.state">
                <span slot="open">正常</span>
                <span slot="close">停用</span>
              </i-switch>
            </FormItem>
            <FormItem label="锁定"
                      prop="isLock">
              <i-switch size="large"
                        @on-change="change"
                        v-model="!!modal.mallCategory.formData.isLock"
                        :value="!!modal.mallCategory.formData.isLock">
                <span slot="open">锁定</span>
                <span slot="close">解锁</span>
              </i-switch>
            </FormItem>
          </Form>
        </Modal>
        <!-- 规格组列表 -->
        <Modal fullscreen
               v-model="modal.group.isShow"
               :loading="modal.group.loading"
               :mask-closable="false"
               :title="modal.group.title"
               footer-hide>
          <div class="mb-20">
            <Button-group>
              <Button custom-icon="iconfont icon-fangkuai2"
                      size="small"
                      type="primary"
                      @click="showCreateGroup">
                新建规格组
              </Button>
            </Button-group>
          </div>
          <Table border
                 :loading="groupList.loading"
                 :columns="groupList.columns"
                 :data="groupList.tableData"
                 @on-selection-change="selectionChange"></Table>
          <div class="normal-list-page-ft clearfix">
            <Page class="fr"
                  :total="queryGroup.totalRecord"
                  :page-size="queryGroup.pageSize"
                  :current="queryGroup.page"
                  @on-change="changePage"
                  @on-page-size-change="onPageSizeChange"
                  show-elevator
                  show-total
                  show-sizer></Page>
          </div>
        </Modal>
        <!-- 新建&修改规格组 -->
        <Modal v-model="modal.addGroup.isShow"
               :loading="modal.addGroup.loading"
               :mask-closable="false"
               :title="modal.addGroup.title"
               @on-ok="postGroup">
          <Form ref="systemFrom"
                :model="modal.addGroup.formData"
                :rules="modal.addGroup.rules"
                :label-width="120">
            <FormItem label="规格组名称"
                      prop="name">
              <Input placeholder="请输入规格组名称"
                     v-model="modal.addGroup.formData.name"
                     style="width:300px;" />
            </FormItem>
            <FormItem label="属性"
                      prop="isPublic">
              <i-switch size="large"
                        @on-change="change"
                        v-model="modal.addGroup.formData.isPublic"
                        :value="modal.addGroup.formData.isPublic">
                <span slot="open">公共</span>
                <span slot="close">私有</span>
              </i-switch>
            </FormItem>
            <FormItem label="锁定"
                      prop="isLock">
              <i-switch size="large"
                        @on-change="change"
                        v-model="modal.addGroup.formData.isLock"
                        :value="modal.addGroup.formData.isLock">
                <span slot="open">是</span>
                <span slot="close">否</span>
              </i-switch>

            </FormItem>
          </Form>
        </Modal>
        <!-- 新建&修改规格属性 -->
        <Modal v-model="modal.addSpec.isShow"
               :loading="modal.addSpec.loading"
               :mask-closable="false"
               :title="modal.addSpec.title"
               @on-ok="postSpec">
          <Form ref="systemFrom"
                :model="modal.addSpec.formData"
                :rules="modal.addSpec.rules"
                :label-width="120">
            <FormItem label="规格组id"
                      prop="groupId">
              <Input disabled
                     v-model="modal.addSpec.formData.groupId"
                     style="width:300px;" />
            </FormItem>
            <FormItem label="规格属性名称"
                      prop="name">
              <Input placeholder="请输入规格属性名称"
                     v-model="modal.addSpec.formData.name"
                     style="width:300px;" />
            </FormItem>
            <FormItem label="通用规则"
                      prop="generic">
              <i-switch size="large"
                        @on-change="change"
                        v-model="modal.addSpec.formData.generic"
                        :value="modal.addSpec.formData.generic">
                <span slot="open">是</span>
                <span slot="close">否</span>
              </i-switch>
            </FormItem>
            <FormItem label="搜索关键词"
                      prop="search">
              <i-switch size="large"
                        @on-change="change"
                        v-model="modal.addSpec.formData.search"
                        :value="modal.addSpec.formData.search">
                <span slot="open">是</span>
                <span slot="close">否</span>
              </i-switch>

            </FormItem>
          </Form>
        </Modal>
        <!-- 绑定品牌 -->
        <Modal v-model="modal.bind.isShow"
               :loading="modal.bind.loading"
               :mask-closable="false"
               :title="modal.bind.title"
               @on-ok="postBind">
          <Form ref="systemFrom"
                :model="modal.bind.formData"
                :rules="modal.bind.rules"
                :label-width="120">
            <FormItem label="品牌"
                      prop="brandId">
              <Select v-model="modal.bind.formData.brandId"
                      @on-change=changeBrand
                      label-in-value
                      style="width:300px"
                      filterable
                      >
                <Option v-for="(ad,index) in brandList"
                        :key="ad.id"
                        :value="ad.id"
                        :label="ad.nameZh"></Option>
              </Select>
            </FormItem>
          </Form>
        </Modal>
      </div>
    </div>
  </div>
</template>
<script>
import CategoryApi from '@/api/business/category.js'
import GroupApi from '@/api/business/group.js'
import SpecApi from '@/api/business/spec.js'
import BrandApi from '@/api/business/brand.js'
import { Message } from 'iview'
import WangEditor from '@/components/Editor/WangEditor.vue'
import Uploadoss from '@/components/uploadoss'
import uploadImage from '@/components/upload-image/upload-image'
import spec from './spec.vue'
export default {
  name: 'mallCategory',
  components: {
    uploadImage,
    WangEditor,
    Uploadoss,
    spec
  },
  props: {
    row: Object
  },
  data () {
    return {
      // 选中的品类
      chooseId: '',
      // 品牌列表
      brandList: [{ id: 0, nameZh: '' }],
      // 弹出层数据
      modal: {
        mallCategory: {
          isShow: false,
          loading: true,
          type: 'create', // create 新建，update 修改
          title: '新建',
          formData: {}
        },
        group: {
          isShow: false,
          loading: true,
          title: '规格组管理'
        },
        addGroup: {
          isShow: false,
          loading: true,
          type: 'create', // create 新建，update 修改
          title: '新建规格组',
          formData: {}
        },
        spec: {
          isShow: false,
          loading: true,
          title: '规格属性管理'
        },
        addSpec: {
          isShow: false,
          loading: true,
          type: 'create', // create 新建，update 修改
          title: '新建规格属性',
          formData: {}
        },
        bind: {
          isShow: false,
          loading: true,
          type: 'create', // create 新建，update 修改
          title: '绑定品牌',
          formData: {}
        }
      },
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          /** 开始自动生成 */
          { title: 'id', minWidth: 80, key: 'id', align: 'center' },
          //   {
          //     type: 'expand',
          //     width: 60,
          //     align: 'center',
          //     render: (h, params) => {
          //       return this.$createElement(submenu, {
          //         ref: 'child',
          //         props: {
          //           row: params.row
          //         }
          //       })
          //     }
          //   },
          { title: '品类名称', minWidth: 100, key: 'name', align: 'center' },
          { title: '品类编码', minWidth: 100, key: 'code', align: 'center' },
          {
            title: '类目图标',
            key: 'icon',
            align: 'center',
            minWidth: 100,
            render: (h, params) => {
              return h('img', {
                attrs: {
                  src: params.row.icon
                },
                style: {
                  width: '50%',
                  height: '50%'
                }
              })
            }
          },
          { title: '父类目ID', minWidth: 80, key: 'parentId', align: 'center' },
          { title: '关键词', minWidth: 80, key: 'metaKey', align: 'center' },
          {
            title: '描述',
            minWidth: 80,
            key: 'metaDescription',
            align: 'center'
          },
          {
            title: '状态',
            key: 'state',
            align: 'center',
            width: '130px',
            render: (create, params) => {
              let s = params.row.state
              let color, text
              if (s) {
                color = '#5ed71a'
                text = '正常'
              } else {
                color = '#d72c23'
                text = '停用 '
              }
              return create(
                'div',
                {
                  style: {
                    color: color,
                    borderRadius: '20px'
                  }
                },
                text
              )
            }
          },
          {
            title: '创建时间',
            align: 'center',
            key: 'createTime',
            minWidth: 100
          },
          {
            title: '更新时间',
            align: 'center',
            key: 'updateTime',
            minWidth: 100
          },
          /** 自动生成结束 */
          {
            title: '操作',
            align: 'center',
            minWidth: 200,
            fixed: 'right',
            render: (h, params) => {
              return h('div', { class: 'action-group' }, [
                // h(
                //   'Tooltip',
                //   {
                //     props: {
                //       placement: 'left',
                //       content: '规格组'
                //     },
                //     style: {
                //       cursor: 'pointer'
                //     }
                //   },
                //   [
                //     h(
                //       'Button',
                //       {
                //         props: {
                //           type: 'success',
                //           size: 'small'
                //         },
                //         style: {
                //           marginRight: '5px',
                //           padding: '1px 2px'
                //         },
                //         on: {
                //           click: () => {
                //             // this.showUpdateModal(params.index);
                //             this.showGroup(params.row.id)
                //           }
                //         }
                //       },
                //       [
                //         h('Icon', {
                //           props: {
                //             type: 'ios-apps',
                //             size: 18
                //           }
                //         })
                //       ]
                //     )
                //   ]
                // ),
                h(
                  'Tooltip',
                  {
                    props: {
                      placement: 'left',
                      content: '绑定品牌'
                    },
                    style: {
                      cursor: 'pointer'
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'success',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          padding: '1px 2px'
                        },
                        on: {
                          click: () => {
                            // this.showUpdateModal(params.index);
                            this.showbind(params.row)
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: 'md-bowtie',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                ),
                h(
                  'Tooltip',
                  {
                    props: {
                      placement: 'left',
                      content: '编辑'
                    },
                    style: {
                      cursor: 'pointer'
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'primary',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          padding: '1px 2px'
                        },
                        on: {
                          click: () => {
                            // this.showUpdateModal(params.index);
                            this.showUpdateModal(params.row)
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: ' iconfont icon-bianjisekuai',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                ),

                h(
                  'Tooltip',
                  {
                    props: {
                      placement: 'right',
                      content: '删除'
                    },
                    style: {
                      cursor: 'pointer'
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'error',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          padding: '1px 2px'
                        },
                        on: {
                          click: () => {
                            this.delData(params.row.id)
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: ' iconfont icon-shanchusekuai',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                )
              ])
            }
          }
        ]
      },
      // 规格组列表
      groupList: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          /** 开始自动生成 */
          { title: 'id', minWidth: 80, key: 'id', align: 'center' },
          {
            type: 'expand',
            width: 60,
            align: 'center',
            render: (h, params) => {
              return this.$createElement(spec, {
                ref: 'child',
                props: {
                  row: params.row
                }
              })
            }
          },
          { title: '规格组名称', minWidth: 100, key: 'name', align: 'center' },
          {
            title: '品类id',
            minWidth: 100,
            key: 'categoryId',
            align: 'center'
          },
          {
            title: '属性',
            key: 'isPublic',
            align: 'center',
            width: '130px',
            render: (create, params) => {
              let s = params.row.isPublic
              let color, text
              if (s) {
                color = '#5ed71a'
                text = '公有'
              } else {
                color = '#d72c23'
                text = '私有 '
              }
              return create(
                'div',
                {
                  style: {
                    color: color,
                    borderRadius: '20px'
                  }
                },
                text
              )
            }
          },
          {
            title: '创建时间',
            align: 'center',
            key: 'createTime',
            minWidth: 100
          },
          {
            title: '更新时间',
            align: 'center',
            key: 'updateTime',
            minWidth: 100
          },
          /** 自动生成结束 */
          {
            title: '操作',
            align: 'center',
            minWidth: 150,
            render: (h, params) => {
              return h('div', { class: 'action-group' }, [
                h(
                  'Tooltip',
                  {
                    props: {
                      placement: 'left',
                      content: '添加规格属性'
                    },
                    style: {
                      cursor: 'pointer'
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'success',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          padding: '1px 2px'
                        },
                        on: {
                          click: () => {
                            this.showCreateSpec(params.row)
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: 'md-git-network',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                ),

                h(
                  'Tooltip',
                  {
                    props: {
                      placement: 'left',
                      content: '编辑'
                    },
                    style: {
                      cursor: 'pointer'
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'primary',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          padding: '1px 2px'
                        },
                        on: {
                          click: () => {
                            // this.showUpdateModal(params.index);
                            this.showUpdateGroup(params.row)
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: ' iconfont icon-bianjisekuai',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                ),

                h(
                  'Tooltip',
                  {
                    props: {
                      placement: 'right',
                      content: '删除'
                    },
                    style: {
                      cursor: 'pointer'
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'error',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          padding: '1px 2px'
                        },
                        on: {
                          click: () => {
                            this.delGroup(params.row.id)
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: ' iconfont icon-shanchusekuai',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                )
              ])
            }
          }
        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        name: ''
      },
      // 规格组查询
      queryGroup: {
        limit: 10,
        page: 1,
        totalRecord: 0
      }
    }
  },
  methods: {
    // 获取列表
    getTableData () {
      const that = this
      that.queryData.totalRecord = undefined
      //  that.list.loading=true
      that.queryData.level = 3
      that.queryData.parentId = this.row.id
      console.log(that.queryData,'3333')
      CategoryApi.getPageList(that.queryData)
        .then((res) => {
          console.log(res.data,'3333')
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.page = res.data.pageNum
          that.queryData.limit = res.data.pageSize
          // that.queryData.totalRecord = res.data.totalRecord
          // that.queryData.page = res.data.pageNum
          // that.queryData.limit = res.data.pageSize
        })
        .catch((error) => {
          Message.error(error)
        })
    },
    // 获取规格列表
    getGroupData (id) {
      const that = this
      that.queryGroup.totalRecord = undefined
      //  that.list.loading=true
      that.queryGroup.categoryId = id
      GroupApi.getPageList(that.queryGroup)
        .then((res) => {
          console.log(res.data)
          that.groupList.tableData = res.data.list
          that.queryGroup.totalRecord = res.data.totalRecord
          that.queryGroup.page = res.data.pageNum
          that.queryGroup.limit = res.data.pageSize
          // that.queryData.totalRecord = res.data.totalRecord
          // that.queryData.page = res.data.pageNum
          // that.queryData.limit = res.data.pageSize
        })
        .catch((error) => {
          Message.error(error)
        })
    },
    // 获取品牌列表
    async getBrandList (categoryId) {
      let that = this
      this.brandList = (
        await BrandApi.getUnbindList({ categoryId: categoryId })
      ).data
    },
    changeBrand (val) {
      console.log(val)
    },
    // 新建&修改
    postData () {
      const that = this
      that.$refs['systemFrom'].validate((valid) => {
        if (valid) {
          if (!that.modal.mallCategory.formData.id) {
            // 新建
            MallCategoryApi.add(that.modal.mallCategory.formData)
              .then((res) => {
                that.modal.mallCategory.isShow = false
                that.modal.mallCategory.loading = false
                if (!res.code) {
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch((error) => {
                Message.error(error)
              })
          } else {
            // 修改
            CategoryApi.update(
              that.modal.mallCategory.formData.id,
              that.modal.mallCategory.formData
            )
              .then((res) => {
                that.modal.mallCategory.isShow = false
                that.modal.mallCategory.loading = false
                if (!res.code) {
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch((error) => {
                Message.error(error)
              })
          }
        } else {
          that.modal.mallCategory.loading = false
          that.$nextTick(() => {
            that.modal.mallCategory.loading = true
          })
        }
      })
    },
    // 新建&修改
    postData1 () {
      const that = this
      that.$refs['systemFrom1'].validate((valid) => {
        if (valid) {
          console.log(that.modal.mallCategory.formData)
          MallCategoryApi.add(that.modal.mallCategory.formData)
            .then((res) => {
              that.modal.mallCategory.isShow = false
              that.modal.mallCategory.loading = false
              if (!res.code) {
                that.getTableData()
                that.$Notice.success({
                  title: '保存成功!'
                })
              } else {
                that.$Notice.error({
                  title: res.message
                })
              }
            })
            .catch((error) => {
              Message.error(error)
            })
        } else {
          that.modal.mallCategory.loading = false
          that.$nextTick(() => {
            that.modal.mallCategory.loading = true
          })
        }
      })
    },
    postGroup () {
      const that = this
      console.log('==postGroup==', this.modal.addGroup.formData)
      if (!that.modal.addGroup.formData.id) {
        // 新建
        GroupApi.add(that.modal.addGroup.formData)
          .then((res) => {
            that.modal.addGroup.isShow = false
            that.modal.addGroup.loading = false
            if (!res.code) {
              that.getGroupData(that.chooseId)
              that.$Notice.success({
                title: '保存成功!'
              })
            } else {
              that.$Notice.error({
                title: res.message
              })
            }
          })
          .catch((error) => {
            Message.error(error)
          })
      } else {
        // 修改
        GroupApi.update(
          that.modal.addGroup.formData.id,
          that.modal.addGroup.formData
        )
          .then((res) => {
            that.modal.addGroup.isShow = false
            that.modal.addGroup.loading = false
            if (!res.code) {
              that.getGroupData(that.chooseId)
              that.$Notice.success({
                title: '保存成功!'
              })
            } else {
              that.$Notice.error({
                title: res.message
              })
            }
          })
          .catch((error) => {
            Message.error(error)
          })
      }
    },
    // 绑定品牌
    postBind () {
      let that = this
      BrandApi.bind(that.modal.bind.formData)
        .then((res) => {
          that.modal.bind.isShow = false
          that.modal.bind.loading = false
          if (!res.code) {
            that.getTableData()
            that.$Notice.success({
              title: '绑定成功!'
            })
          } else {
            that.$Notice.error({
              title: res.message
            })
          }
        })
        .catch((error) => {
          Message.error(error)
        })
    },
    // 新建规格属性
    postSpec () {
      let that = this
      console.log('==formData==', this.modal.addSpec.formData)
      console.log('==row==', this.row)
      SpecApi.add(that.modal.addSpec.formData)
        .then((res) => {
          that.modal.addSpec.isShow = false
          that.modal.addSpec.loading = false
          if (!res.code) {
            that.getGroupData(that.chooseId)
            that.$Notice.success({
              title: '保存成功!'
            })
          } else {
            that.$Notice.error({
              title: res.message
            })
          }
        })
        .catch((error) => {
          Message.error(error)
        })
    },
    // 删除
    delData (ids) {
      this.$Modal.confirm({
        title: '确认删除',
        content:
          '<p>您确认删除id为 <strong>' +
          ids.toString() +
          '</strong> 的品类吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
        loading: true,
        onOk: () => {
          CategoryApi.del(ids).then((res) => {
            this.$Modal.remove()
            if (!res.code) {
              this.$Notice.success({
                title: '删除成功'
              })
              this.queryData.page = 1
              this.getTableData()
            } else {
              this.$Notice.error({
                title: res.message
              })
            }
          })
        }
      })
    },
    // 删除规格组
    delGroup (ids) {
      let that = this
      this.$Modal.confirm({
        title: '确认删除',
        content:
          '<p>您确认删除id为 <strong>' +
          ids.toString() +
          '</strong> 的规格组吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
        loading: true,
        onOk: () => {
          GroupApi.del(ids).then((res) => {
            this.$Modal.remove()
            if (!res.code) {
              this.$Notice.success({
                title: '删除成功'
              })
              this.queryData.page = 1
              that.getGroupData(that.chooseId)
            } else {
              this.$Notice.error({
                title: res.message
              })
            }
          })
        }
      })
    },
    // 图片的校验
    calcImg () {
      let imgUrl = this.modal.mallCategory.formData.uploadList.map((v) => {
        if (v.length < 1) return v
        v = v.response.res.requestUrls[0]
        return v
      })
      this.modal.mallCategory.formData.icon = imgUrl[0]
    },

    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },

    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    },

    // 显示新建弹窗
    showCreateModal (row) {
      console.log('==row==', row)
      this.modal.mallCategory.type = 'create'
      this.modal.mallCategory.title = '新建'
      this.modal.mallCategory.formData = {
        level: 3,
        isLock: 1
      }
      this.modal.mallCategory.formData.parentId = row.id
      this.modal.mallCategory.isShow = true
    },
    // 显示修改弹窗
    showUpdateModal (row) {
      console.log('==row', row)
      this.modal.mallCategory.type = 'update'
      this.modal.mallCategory.title = '修改'
      // 不请求后端，直接list取对象
      // this.modal.mallCategory.formData = JSON.parse(
      //   JSON.stringify(this.list.tableData)
      // )[index];
      const that = this
      let item = {
        status: 'finished',
        response: {
          res: {
            requestUrls: []
          }
        }
      }
      that.modal.mallCategory.formData = row
      item.response.res.requestUrls.push(row.icon)
      that.modal.mallCategory.formData.uploadList = []
      that.modal.mallCategory.formData.uploadList.push(item)
      this.modal.mallCategory.isShow = true
    },
    showCreateGroup () {
      this.modal.addGroup.title = '新建规格组'
      this.modal.addGroup.formData.isLock = false
      this.modal.addGroup.formData.isPublic = true
      this.modal.addGroup.formData.name = ''
      this.modal.addGroup.isShow = true
    },
    showUpdateGroup (row) {
      console.log('==row', row)
      this.modal.addGroup.type = 'update'
      this.modal.addGroup.title = '修改规格组'
      this.modal.addGroup.formData = row
      this.modal.addGroup.isShow = true
    },
    // 显示规格组弹窗
    showGroup (id) {
      console.log('==id==', id)
      this.chooseId = id
      this.getGroupData(id)
      this.modal.addGroup.formData.categoryId = id
      this.modal.group.isShow = true
    },
    showCreateSpec (row) {
      console.log('==row==', row)
      this.modal.addSpec.title = '新建规格属性'
      this.modal.addSpec.formData.categoryId = row.categoryId
      this.modal.addSpec.formData.groupId = row.id
      this.modal.addSpec.formData.name = ''
      this.modal.addSpec.formData.search = false
      this.modal.addSpec.formData.segments = false
      this.modal.addSpec.formData.generic = true
      this.modal.addSpec.isShow = true
    },
    showbind (row) {
      this.modal.bind.formData = {}
      this.modal.bind.formData.categoryId = row.id
      this.getBrandList(row.id)
      this.modal.bind.isShow = true
    }
  },

  async created () {
    this.getTableData()
    // this.getBrandList()
  }
}
</script>
